<template>
    <div class="community-container">
      <div class="header">
        <h1>互动评价</h1>
        <p>查看其他用户的评价，分享您的使用体验</p>
      </div>
  
      <div class="content-area">
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="最新评价" name="new">
            <el-card v-for="item in evaluations" :key="item.id" class="evaluation-card">
              <div class="user-info">
                <img :src="item.avatar" class="avatar">
                <div class="user-meta">
                  <span>{{ item.username }}</span>
                  <span>{{ item.time }}</span>
                </div>
              </div>
              <div class="rating">
                <el-rate v-model="item.rating" disabled></el-rate>
              </div>
              <p class="comment">{{ item.comment }}</p>
            </el-card>
          </el-tab-pane>
          
          <el-tab-pane label="写评价" name="write">
            <!-- <el-form @submit.prevent="submitReview"> -->
              <el-rate v-model="form.rating" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
              <el-input
                type="textarea"
                v-model="form.comment"
                placeholder="请输入您的评价..."
                :rows="4"
              ></el-input>
              <el-button type="primary" native-type="submit">提交评价</el-button>
         
          </el-tab-pane>
        </el-tabs>
      </div>
  
      <!-- <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="bottom-nav"
        @select="handleNavSelect"
      > -->
        <!-- 底部导航保持统一 -->
      <!-- </el-menu> -->
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const activeTab = ref('new')
  const form = ref({
    rating: 3,
    comment: ''
  })
  
  const evaluations = ref([
    {
      id: 1,
      username: '花农小红',
      avatar: 'https://example.com/avatar.jpg',
      time: '2023-08-15',
      rating: 4,
      comment: '非常实用的种植指南！'
    },
    {
      id: 2,
      username: '园艺达人',
      avatar: 'https://example.com/avatar2.jpg',
      time: '2023-08-14',
      rating: 5,
      comment: '内容专业，受益匪浅！'
    }
  ])
  </script>
  
  <style scoped>
  .evaluation-card {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
  }
  
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  
  .user-meta {
    display: flex;
    flex-direction: column;
  }
  
  .rating {
    margin: 15px 0;
  }
  
  .comment {
    font-size: 14px;
    line-height: 1.5;
    color: #606266;
  }
  
  .tabs {
    margin-top: 20px;
  }
  </style>